<template>
  <div class="cart">
    <detail-courier :title="title"></detail-courier>
    <div class="cart-vant-list-s" v-if="carLists.length !== 0">
      <van-swipe-cell
        :before-close="beforeClose"
        v-for="item in carLists"
        :key="item.id"
      >
        <van-card
          :num="item.number"
          :price="item.retail_price"
          :title="item.goods_name"
          class="goods-card"
          :thumb="item.list_pic_url"
          :stop-propagation="true"
        >
        </van-card>
        <template #right>
          <van-button
            @click="btnClicks(item)"
            square
            text="删除"
            type="danger"
            class="delete-button"
          />
        </template>

        <van-checkbox
          ref="checkbox"
          v-model="item.isChecked"
          @click="checkClick(item)"
          >复选框</van-checkbox
        >
      </van-swipe-cell>
    </div>

    <div class="detail-tab-bar">
      <div class="detail-tab-bar-item items">
        <van-checkbox @click="mainChecked" v-model="checkeds"
          >全选</van-checkbox
        >
      </div>
      <div class="detail-tab-bar-item price">
        {{ totalPrice | filterPrice }}
      </div>
      <div class="detail-tab-bar-item shop-car" @click="buyClick">下单</div>
    </div>
  </div>
</template>

<script>
import { Dialog } from "vant";
import { Toast } from "vant";
import DetailCourier from "./children/DetailCourier";
// import CartList from "./children/CartList";
// import DetailTabBar from "./children/DetailTabBar";
// import CartVantList from "./children/CartVantList";
// import CartList from "./children/DetailCart";
import { getCartList, getDeleteAction } from "@/network/cart";
import { getSubmitAction } from "@/network/payload";
export default {
  name: "cart",
  components: {
    DetailCourier,
    // CartList, // 不用了
    // DetailTabBar,
    // CartVantList,
  },
  data() {
    return {
      title: ["30天无忧退货", "48小时快速退款", "满88元免邮费"],
      carLists: [],
      checkeds: false,
      id: "",
      isBuy: true,
      goodsId: "",
      goodsIdList: [],
    };
  },
  filters: {
    filterPrice(val) {
      return "¥" + val.toFixed(2);
    },
  },
  created() {
    this.getCartLists();
    console.log(this.$store.state.cartObj);
  },
  computed: {
    totalPrice() {
      return this.carLists.reduce((preValue, value) => {
        if (value.isChecked) {
          return (preValue += value.retail_price * value.number);
        } else {
          return preValue;
        }
      }, 0);
    },
  },
  methods: {
    buyClick() {
      console.log(1);
      this.isBuy = this.carLists.some((item) => item.isChecked);
      if (this.isBuy) {
        console.log("欢迎光临");
        // 提交订单 接口

        let allPrise = this.totalPrice;
        let goodsId = this.goodsIdList.join(",");
        console.log(goodsId);
        const datas = {
          allPrise,
          goodsId,
          openId: localStorage.getItem("openId"),
        };
        console.log(datas);

        getSubmitAction(datas).then((res) => {
          console.log(res);
        });

        this.$router.push({
          path: "/payload",
        });
      } else {
        Toast("请选择商品");
      }
    },
    // position 为关闭时点击的位置
    // instance 为对应的 SwipeCell 实例
    beforeClose({ position, instance }) {
      switch (position) {
        // case "left":
        // case "cell":
        // case "outside":
        //   instance.close();
        //   break;
        case "right":
          Dialog.confirm({
            message: "确定删除吗？",
          })
            .then(() => {
              console.log(2);
              this.deleteClick();
              Toast.loading({
                message: "加载中...",
                forbidClick: true,
                loadingType: "spinner",
                duration: 500,
              });
              setTimeout(() => {
                // 给它反应时间
                this.getCartLists(); // 重加载
              }, 500);
              instance.close();
            })
            .catch(() => {
              Toast("您取消了删除");
              instance.close();
            });
          break;
      }
    },
    btnClicks(item) {
      // console.log(this.carLists);
      // console.log(item);
      this.id = item.id;
      console.log(this.id);
    },
    // 删除
    deleteClick() {
      getDeleteAction({
        id: this.id,
      }).then((res) => {
        console.log(res, "删除成功");
      });
    },
    // checkbox 监听
    mainChecked() {
      // console.log("哈哈哈");
      this.carLists.map((item) => (item.isChecked = this.checkeds));
      this.carLists.forEach((item) => {
        if (item.isChecked) {
          this.goodsIdList.push(item.goods_id);
        } else {
          let index = this.goodsIdList.findIndex(
            (items) => items.id == item.id
          );
          this.goodsIdList.splice(index, 1);
        }
      });
      console.log(this.goodsIdList);
    },
    checkClick(item) {
      console.log(item, "你好啊");
      if (item.isChecked) {
        this.goodsIdList.push(item.goods_id);
      } else {
        let index = this.goodsIdList.findIndex((items) => items.id == item.id);
        this.goodsIdList.splice(index, 1);
      }
      console.log(this.goodsIdList);
      this.checkeds = this.carLists.every((item) => item.isChecked);
    },
    getCartLists() {
      console.log("被打印了");
      let openId = localStorage.getItem("openId");
      const datas = {
        openId,
      };
      getCartList(datas).then((res) => {
        console.log(res, "1");
        res.data.map((item) => {
          Object.assign(item, { isChecked: false });
        });
        this.carLists = res.data;
        console.log(res);
        console.log(this.carLists);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.cart {
  background-color: #f4f4f4;
}
.cart-vant-list-s {
  margin-bottom: 50px;
}
.detail-tab-bar {
  position: fixed;
  left: 0;
  bottom: 49px;
  width: 100%;
  z-index: 2000;
  display: flex;
  height: 49px;
  background-color: #fff;

  .detail-tab-bar-item {
    // flex: 1;
    width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 23px;
    }
  }
  div.items {
    width: 70%;
    justify-content: flex-start;
    align-items: center;
    margin-left: 10px;
  }
  .shop-car {
    background-color: #b4282d;
    color: #fff;
  }
  .price {
    color: #b4282d;
  }
}
</style>
